<template>
  <h1>{{ msg }}</h1>

  <p>
    <a href="https://vitejs.dev/guide/features.html" target="_blank">
      Vite Documentation
    </a>
  </p>
	<Comp></Comp>

  <el-button @click="state.count++">count is: {{ state.count }}</el-button>
  <el-button @click="$store.commit('add')">vuex count is: {{ $store.state.counter }}</el-button>
  <el-button @click="onclick">emit</el-button>
</template>

<script setup>
import { defineProps, reactive,useContext } from 'vue'
import Comp from './Comp.vue'
import {getUsers} from 'api/user'
defineProps({
  msg: String
})

const emit = defineEmit(['myclick'])

const onclick = () =>{
	ctx.emit('myclick')
}

const state = reactive({ count: 0 })

const ctx = useContext()
console.log(ctx)

//请求mock api

//fetch请求
// fetch('/api/getUsers').then(res=>res.json()).then(data=>console.log(data))

//axios请求(在setup环境里，本身就是带async 修饰符的，如果还使用了await，则此时当前vue就会变成异步组件,被挂起不显示)
//解决方案：在父组件里面，给子组件包裹<Suspense>
let res = await getUsers('/getAllUsers')
console.log(res.data)
</script>

<style scoped>
</style>
